<div class="demo">
<ol id="selectable"  class="hour"></ol>;
<ol id="selectable"  class="monday"><div id="monday"></div></ol>
<ol id="selectable"  class="tuesday"><div id="tuesday"></div></ol>
<ol id="selectable"  class="wednesday"><div id="wednesday"></div></ol>
<ol id="selectable"  class="thursday"><div id="thursday"></div></ol>
<ol id="selectable"  class="friday"><div id="friday"></div></ol>
<ol id="selectable"  class="saturday"><div id="saturday"></div></ol>

<div id="dialog-form" title="Create new user">
	<p class="validateTips">All form fields are required.</p>

	<form>
	<fieldset>
		<!-- <label for="name">Name</label>
		<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
		<label for="email">Email</label>
		<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
		<label for="password">Password</label>
		<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" /> -->
	</fieldset>
	</form>
</div>

<input id="clickOL" type="hidden" value="">
<input id="clickLI" type="hidden" value="" left="" top="">
</div><!-- End demo -->


<div id="dragParent">

	

</div>




	<script>

	$(function() {
		//$( "#selectable" ).selectable({
                var last ;
                var first ;
                var elementOL;
		$("ol").abEmploiduTemps({
                        i : 0
                });
                $( "ol" ).selectable({
                	filter : ".case",
                        
			stop: function() {
				var result = $( "#select-result" ).empty();
                                
                                        last = $(".ui-selected:last");
                                        first = $(".ui-selected:first");
					//var index = $( "#selectable li" ).index( first );
                                        //result.append( " #" + ( index + 1 ) );
                                        //alert($( "#selectable li" ).index( this ));
                                       // $( "#selectable li" ).attr('id', $( "#selectable li" ).index( this ))
                                        //get cptID class: refer abempoitemps.css
                                        //alert($(this).position().top+'  '+ $(this).parent().position().left)
                                        var element = first.attr('id');
                                        var element1 = last.attr('id');
                                        $("#clickLI").val(element[2]);
                                        $("#clickLI").attr('left', first.parent().position().left);
                                        $("#clickLI").attr('top', first.position().top);
                                        //alert($("#clickLI").attr('value')+'  '+$("#clickLI").attr('left'));
                                        //alert(first.css('height'));
                                       // alert(element);
                                        //alert(element1);
                                        //alert($("#passelectable").html());
                                        //alert(first.position().top+'   '+first.position().height);
                                        $(".ui-selected").removeClass('ui-selected');
				
                                
                                
			},
                        selected: function(event, ui) { 
                           $( "#dialog-form" ).dialog( "open" );
                           
                           var element = $(this).attr('class').split(' ');
                           // get first class 
                           $("#clickOL").val(element[0]);
                          // alert($(this).attr('class').split(' '));
                           //alert($("#clickOL").val());
                           //$(this).removeClass('ui-selected').addClass('ui-unselecting');
                           //$(this).removeClass('ui-selected');
                            
                        }
		});

               // $( "#dialog-form" ).dialog( "destroy" );
               $( "#dialog-form" ).dialog({
			autoOpen: false,
			height: 200,
			width: 250,
			modal: true,
			buttons: {
				"Ajouter": function() {
                                        
                                        // Initialisation du composant "sortable"
                                        //alert(test);
                                        //alert($("#clickLI").val());alert($("#clickLI").val());
                                        /*var out = '<div id="' +$("#clickLI").val()+'" class="ui-widget-content drag">'; 
                                            out += '<p>Drag me around</p>';
                                            out += '</div> ';
                                        $('#dragParent').append(out);*/
                                       // alert('#'+ $("#clickLI").val());
                                        //alert($("#dragParent").html());'#'+ $("#clickLI").val()
                                        /*$('#'+$("#clickLI").val()).css('left',$(".ui-selected").parent().position().left);
                                        $('#'+$("#clickLI").val()).css('top',$(".ui-selected").position().top);
                                        $('#'+$("#clickLI").val()).css('width','100px');
                                        $('#'+$("#clickLI").val()).css('height','18px');*/
                                        var event_id = first.attr('id')+'id';
                                       // var margin_top = $(".ui-selected").position().top;//- $(".ui-selected").parent().position().top;
                                       // var margin_top = $(".ui-selected").position().top - $(".ui-selected").parent().position().top;
                                        //var margin_left = $(".ui-selected").parent().position().left;
                                        //alert('top='+margin_top+'lest'+margin_left+ '  ol'+$("#clickOL").val())
                                        var element = first.parent().attr('class').split(' ');
                                        var topEvent = first.position().top + 19;
                                        var heightEvent = last.position().top -first.position().top + 28;
                                        //var out = '<p id="' + event_id + '" class="ui-widget-content drag" height="30px" width="100px" left="' + + '">Drag me around</p>';
                                        var event = $('<div>Drag me around</div>')
                                            .appendTo('#dragParent')
                                            .attr('class','calendar_event')
                                            .attr('id',event_id)
                                            .css({
                                                height:heightEvent+"px",
                                                width:"100px",
                                                left:first.parent().position().left+"px",
                                                //marginTop:first.position().top+"px",
                                                top:topEvent+"px",
                                                position:"absolute"
                                            });
                                            //alert($("#clickLI").attr('top'));
                                            var contenu;
                                            var elementFirst =  first.attr('id').split('-');
                                            var elementLast =  last.attr('id').split('-');
                                           
                                            contenu = '<div class="" id="'+ event_id +'_date" >';
                                                contenu+= '<span id="'+ event_id +'_date_debut_heure">'+ elementFirst[2] +'</span>:';
                                                contenu+=  '<span id="'+ event_id +'_date_debut_minute">00</span> -';
                                                contenu+=  '<span id="'+ event_id +'_date_fin_heure"> '+ elementLast[3] +'</span>:';
                                                contenu+=  '<span id="'+ event_id +'_date_fin_minute">00</span>';
                                            contenu+=  '</div>';
                                            contenu+=  '<div class="calendar_event_title" id="'+ event_id +'_title">(Sans titre)</div>';
                                            contenu+=  '<div class="calendar_event_lieu" id="'+ event_id +'_lieu" style="display:none;">(Inconnu)</div>';
                                        $( "#"+event_id ).append(contenu);
                                        //alert(element);
                                        $( "#"+event_id ).draggable({
                                            containment: $("."+element[0]),
                                            //containment: '.'+element[0],
                                            //grid: [10, 10],
                                            delay: 100,
                                            drag: function(event, ui) {
                                               /* var object_drop = $(this);
                                                var event_id=object_drop.attr("id");   
                                                //alert($("#"+event_id+"_date_debut_heure").html());
                                                var heure_depart = parseInt($("#"+event_id+"_date_debut_heure").html(),10);
                                                var min_depart = parseInt($("#"+event_id+"_date_debut_minute").html(),10);  
                                                var heure_ref = new Date();
                                                heure_ref.setHours(6, 0, 0, 0);
                                                var timestamp=heure_ref.getTime();
                                                //alert(new Date(heure_ref.getTime()) );
                                                //alert(first.parent().position().top+'  '+ first.position().top);
                                                 var height_css=object_drop.css("height");
                                                 var height_css_value=parseInt(height_css.replace(".px",""));
                                                var height_between_ol_event =first.position().top - first.parent().position().top ;
                                                var duree_en_milli=((($(this).position().top/29)*60)*60)*1000;
                                                //alert(new Date(timestamp+duree_en_milli-3600000) );
                                                var new_heure = new Date();
                                                new_heure.setTime(timestamp+duree_en_milli);
                                                $("#"+event_id+"_date_debut_heure").html(new_heure.getHours());
                                                $("#"+event_id+"_date_debut_minute").html(new_heure.getMinutes());*/
                                                var object_drop = $(this);
                                                var object_position=object_drop.position();
                                                var this_position=$(this).parent().position();
                                                current_position=object_position.top - this_position.top - 1;

                                                /*placement de l'evenement
                                                var marg_css=object_drop.css("margin-top");
                                                var marg_css_value=parseInt(marg_css.replace(".px",""));
                                                var margin_top=marg_css_value+current_position;
                                                if(margin_top<0)margin_top=0;
                                                margin_top=parseInt(margin_top);*/



                                                /*changement affichage horaire*/
                                                var event_id=object_drop.attr("id");

                                                var depart_en_sec=((current_position/30)*60)*60;
                                                var depart_en_millisec=depart_en_sec*1000 + (6*3600000);
                                                var height_css=object_drop.css("height");
                                                var height_css_value=parseInt(height_css.replace(".px",""));
                                                var duree_en_sec=((height_css_value/30)*60)*60;
                                                var duree_en_millisec=duree_en_sec*1000;
                                                var fin_en_sec=depart_en_sec + duree_en_sec;
                                                var fin_en_millisec=depart_en_millisec + duree_en_millisec;
                                                var nouvelle_heure_depart = new Date();
                                                nouvelle_heure_depart.setTime(depart_en_millisec);
                                                var nouvelle_heure_fin = new Date();
                                                nouvelle_heure_fin.setTime(fin_en_millisec);
                                                $("#"+event_id+"_date_debut_heure").html(nouvelle_heure_depart.getHours());
                                                $("#"+event_id+"_date_debut_minute").html(nouvelle_heure_depart.getMinutes());
                                                $("#"+event_id+"_date_fin_heure").html(nouvelle_heure_fin.getHours());
                                                $("#"+event_id+"_date_fin_minute").html(nouvelle_heure_fin.getMinutes());
             
                                            },
                                            stop:function(event, ui) {
                                                var object_drop = $(this);
                                                var event_id=object_drop.attr("id");   
                                                //alert($("#"+event_id+"_date_debut_heure").html());
                                                var heure_depart=parseInt($("#"+event_id+"_date_debut_heure").html());
                                                var min_depart=parseInt($("#"+event_id+"_date_debut_minute").html());   
             
                                            }
                                           
                                        });
                                        $( "#"+event_id  ).resizable({
                                            resize: function(event,ui) {
                                                var object_drop = $(this);
                                                var event_id=object_drop.attr("id");   
                                                //alert($("#"+event_id+"_date_debut_heure").html());
                                                var heure_depart = parseInt($("#"+event_id+"_date_debut_heure").html(),10);
                                                var min_depart = parseInt($("#"+event_id+"_date_debut_minute").html(),10);  
                                                var heure_ref = new Date();
                                                heure_ref.setHours(heure_depart, min_depart, 0, 0);
                                                var timestamp=heure_ref.getTime();
                                                var height_css=object_drop.css("height");
                                                
                                                var height_css_value=parseInt(height_css.replace(".px",""));
                                                var duree_en_milli=(((height_css_value/29)*60)*60)*1000;
                                                //alert(test.setTime(duree_en_millisec));
                                                 
                                                var new_heure = new Date();
                                                new_heure.setTime(timestamp+duree_en_milli);
                                                //alert(new Date(timestamp)+' '+ heure_depart+' '+ min_depart );
                                                //alert(new Date(new_heure.getTime()) );
                                                
                                               // alert(first.attr('id').split('-')+'   '+last.attr('id').split('-'));
                                                $("#"+event_id+"_date_fin_heure").html(new_heure.getHours());
                                                $("#"+event_id+"_date_fin_minute").html(new_heure.getMinutes());
                                            },
                                            start: function(event, ui) {
                                                /*var object_drop = $(this);
                                                var event_id = object_drop.attr("id");
                                                var height_css = object_drop.css("height");
                                                var height_css_value = parseInt(height_css.replace(".px",""));
                                                var duree_en_sec = (((height_css_value/10)/4)*60)*60;
                                                alert(duree_en_sec); 
                                                //alert($(this).css('height'));  */
                                            },
                                            stop: function(event, ui) { 
                                               /* var object_drop = $(this);
                                                var event_id = object_drop.attr("id");
                                                var height_css = object_drop.css("height");
                                                var height_css_value = parseInt(height_css.replace(".px",""));
                                                var duree_en_sec = (((height_css_value/10)/4)*60)*60;
                                                alert(duree_en_sec); 
                                                //alert($(this).css('height'));  */
                                        }
                                        });
					var bValid = true;
					allFields.removeClass( "ui-state-error" );

					bValid = bValid && checkLength( name, "username", 3, 16 );
					bValid = bValid && checkLength( email, "email", 6, 80 );
					bValid = bValid && checkLength( password, "password", 5, 16 );

					bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
					// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
					bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
					bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );

					if ( bValid ) {
						$( "#users tbody" ).append( "<tr>" +
							"<td>" + name.val() + "</td>" + 
							"<td>" + email.val() + "</td>" + 
							"<td>" + password.val() + "</td>" +
						"</tr>" ); 
						$( this ).dialog( "close" );
					}
				},
				"Annuler": function() {
					$( this ).dialog( "close" );
				}
			},
			close: function() {
				//allFields.val( "" ).removeClass( "ui-state-error" );
			}
		});
                //$( "#create-user" )
                

                
	});
        
        /*pos = $('.monday').findPos();
            //retourne le coordonnÃ©es via x:curleft,y:curtop,z:curheight,t:curwidth
                alert('curleft:'+pos.x + ' curtop:'+ pos.y+ '  curheight:'+ pos.z+ '  curwidth:'+ pos.t);

                */
               //alert( $('.ui-widget-content').html());
	</script>